<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ByUsi短链生成服务</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/bootstrap-icons/font/bootstrap-icons.css">
    <style>
        body {
            padding-top: 56px;
        }
        .hero-section {
            background-color: #f8f9fa;
            padding: 3rem 0;
            margin-bottom: 2rem;
            border-radius: 10px;
        }
        .shorten-form {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .popular-links .card {
            transition: transform 0.2s;
            height: 100%;
        }
        .popular-links .card:hover {
            transform: translateY(-5px);
        }
        .link-card {
            border-left: 4px solid #0d6efd;
        }
        #resultAlert {
            transition: all 0.3s ease;
        }
        .copy-btn {
            cursor: pointer;
        }
        .advanced-options-toggle {
            color: #0d6efd;
            text-decoration: none;
        }
        .advanced-options-toggle:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">短链服务</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="https://gitee.com/byusi/ShortLink">源码</a>
                    </li>
                    {% if 'user' in session %}
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">仪表盘</a>
                    </li>
                    {% endif %}
                </ul>
                <ul class="navbar-nav">
                    {% if 'user' in session %}
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle me-1"></i>{{ user.username }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="/dashboard"><i class="bi bi-speedometer2 me-2"></i>我的仪表盘</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-right me-2"></i>退出登录</a></li>
                        </ul>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="/login"><i class="bi bi-box-arrow-in-right me-1"></i>登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/register"><i class="bi bi-person-plus me-1"></i>注册</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <div class="container py-4">
        <div class="hero-section text-center">
            <h1 class="display-4 mb-3">快速创建短链接</h1>
            <p class="lead mb-4">简化您的链接，跟踪点击数据，提升用户体验</p>
            
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="shorten-form">
                        <form id="shortenForm">
                            <div class="row g-2 mb-3">
                                <div class="col-md-9">
                                    <input type="url" class="form-control form-control-lg" id="urlInput" placeholder="https://example.com" required>
                                </div>
                                <div class="col-md-3">
                                    <button type="submit" class="btn btn-primary btn-lg w-100">
                                        <i class="bi bi-link-45deg me-1"></i>生成短链
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 暂时下架高级配置功能 -->
                            <!--<div class="text-start mb-3">
                                <a href="#advancedOptions" class="advanced-options-toggle" data-bs-toggle="collapse" aria-expanded="false" aria-controls="advancedOptions">
                                    <i class="bi bi-gear me-1"></i>高级选项
                                </a>
                                
                                <div class="collapse mt-2" id="advancedOptions">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label for="customCode" class="form-label">自定义短码</label>
                                            <div class="input-group">
                                                <span class="input-group-text">{{ request.host_url }}</span>
                                                <input type="text" class="form-control" id="customCode" placeholder="可选" pattern="[a-zA-Z0-9_-]{4,20}" title="只能包含字母、数字、下划线和连字符，长度4-20">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="expireDays" class="form-label">过期天数</label>
                                            <select class="form-select" id="expireDays">
                                                <option value="1">1天</option>
                                                <option value="7">7天</option>
                                                <option value="30" selected>30天</option>
                                                <option value="90">90天</option>
                                                <option value="365">1年</option>
                                                <option value="0">永不过期</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="title" class="form-label">标题</label>
                                            <input type="text" class="form-control" id="title" placeholder="可选" maxlength="50">
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-check form-switch pt-4">
                                                <input class="form-check-input" type="checkbox" id="isPublic" checked>
                                                <label class="form-check-label" for="isPublic">公开短链</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <label for="description" class="form-label">描述</label>
                                            <textarea class="form-control" id="description" rows="2" placeholder="可选" maxlength="200"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>-->
                        </form>
                        
                        <div id="resultAlert" class="alert alert-success mt-3 d-flex align-items-center justify-content-between d-none">
                            <div>
                                <i class="bi bi-check-circle-fill me-2"></i>
                                <strong>短链创建成功:</strong> 
                                <a id="shortLink" href="#" target="_blank" class="alert-link"></a>
                            </div>
                            <button id="copyBtn" class="btn btn-sm btn-outline-secondary copy-btn" title="复制到剪贴板">
                                <i class="bi bi-clipboard"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        {% if popular_links %}
        <div class="mb-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h3>热门短链</h3>
                <a href="/public" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            
            <div class="row popular-links g-3">
                {% for link in popular_links %}
                <div class="col-md-4">
                    <div class="card link-card h-100">
                        <div class="card-body">
                            <h5 class="card-title">{{ link[2] or link[1]|truncate(30) }}</h5>
                            <p class="card-text text-muted small">{{ link[3] or "无描述" }}</p>
                            <a href="/{{ link[0] }}" class="stretched-link" target="_blank"></a>
                        </div>
                        <div class="card-footer bg-transparent">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="badge bg-primary rounded-pill">
                                    <i class="bi bi-graph-up me-1"></i>{{ link[4] }}
                                </span>
                                <small class="text-muted text-truncate ms-2" style="max-width: 60%;">
                                    {{ request.host_url }}{{ link[0] }}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        
        <div class="row g-4 mt-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3 text-primary">
                            <i class="bi bi-speedometer2" style="font-size: 2rem;"></i>
                        </div>
                        <h5 class="card-title">快速创建</h5>
                        <p class="card-text text-muted">只需几秒钟即可将长链接转换为简洁、易记的短链接。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3 text-success">
                            <i class="bi bi-bar-chart" style="font-size: 2rem;"></i>
                        </div>
                        <h5 class="card-title">访问统计</h5>
                        <p class="card-text text-muted">实时跟踪您的短链接点击数据，了解用户行为。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="mb-3 text-info">
                            <i class="bi bi-shield-lock" style="font-size: 2rem;"></i>
                        </div>
                        <h5 class="card-title">安全可靠</h5>
                        <p class="card-text text-muted">采用HTTPS加密传输，保障您的数据安全和隐私。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!--
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>短链服务</h5>
                    <p class="text-muted">一个简单、快速、可靠的短链接生成平台。</p>
                </div>
                <div class="col-md-3">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/" class="text-decoration-none text-muted">首页</a></li>
                        {% if 'user' in session %}
                        <li><a href="/dashboard" class="text-decoration-none text-muted">仪表盘</a></li>
                        {% else %}
                        <li><a href="/login" class="text-decoration-none text-muted">登录</a></li>
                        <li><a href="/register" class="text-decoration-none text-muted">注册</a></li>
                        {% endif %}
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>帮助</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-decoration-none text-muted">使用指南</a></li>
                        <li><a href="#" class="text-decoration-none text-muted">常见问题</a></li>
                        <li><a href="#" class="text-decoration-none text-muted">联系我们</a></li>
                    </ul>
                </div>
            </div>
            <hr class="my-4 bg-secondary">
            <div class="text-center text-muted">
                <small>© 2025 ByUsi. 保留所有权利.</small>
            </div>
        </div>
    </footer>
-->

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const shortenForm = document.getElementById('shortenForm');
            const resultAlert = document.getElementById('resultAlert');
            const shortLink = document.getElementById('shortLink');
            const copyBtn = document.getElementById('copyBtn');
            
            shortenForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const url = document.getElementById('urlInput').value;
                const customCode = document.getElementById('customCode').value;
                const expireDays = document.getElementById('expireDays').value;
                const title = document.getElementById('title').value;
                const description = document.getElementById('description').value;
                const isPublic = document.getElementById('isPublic').checked;
                
                const submitBtn = shortenForm.querySelector('button[type="submit"]');
                const originalBtnText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>处理中...';
                submitBtn.disabled = true;
                
                fetch('/create', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `url=${encodeURIComponent(url)}&custom_code=${encodeURIComponent(customCode)}&expire_days=${expireDays}&title=${encodeURIComponent(title)}&description=${encodeURIComponent(description)}&is_public=${isPublic ? 'on' : ''}`
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        showAlert('danger', data.error);
                    } else {
                        shortLink.href = data.short_url;
                        shortLink.textContent = data.short_url;
                        resultAlert.classList.remove('d-none');
                        
                        document.getElementById('urlInput').value = '';
                        document.getElementById('customCode').value = '';
                        document.getElementById('title').value = '';
                        document.getElementById('description').value = '';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', '创建短链时出错，请稍后重试');
                })
                .finally(() => {
                    submitBtn.innerHTML = originalBtnText;
                    submitBtn.disabled = false;
                });
            });
            
            copyBtn.addEventListener('click', function() {
                const textToCopy = shortLink.href;
                navigator.clipboard.writeText(textToCopy).then(() => {
                    const originalIcon = copyBtn.innerHTML;
                    copyBtn.innerHTML = '<i class="bi bi-check"></i>';
                    copyBtn.classList.remove('btn-outline-secondary');
                    copyBtn.classList.add('btn-success');
                    
                    setTimeout(() => {
                        copyBtn.innerHTML = originalIcon;
                        copyBtn.classList.add('btn-outline-secondary');
                        copyBtn.classList.remove('btn-success');
                    }, 2000);
                });
            });
            
            function showAlert(type, message) {
                const alertDiv = document.createElement('div');
                alertDiv.className = `alert alert-${type} mt-3`;
                alertDiv.innerHTML = message;
                
                shortenForm.parentNode.insertBefore(alertDiv, shortenForm.nextSibling);
                
                setTimeout(() => {
                    alertDiv.remove();
                }, 5000);
            }
            
            document.getElementById('urlInput').addEventListener('input', function() {
                if (this.value && !this.validity.valid) {
                    this.classList.add('is-invalid');
                } else {
                    this.classList.remove('is-invalid');
                }
            });
        });
    </script>
</body>
</html>